<template>
  <div>

    <upload_item @before-upload="decodeUpload" :file="encodedImg" step="step 1" name="请上传图片"
                 :format="format1"></upload_item>


    <DescriptionList :col="1" layout="vertical" v-if="decodeMsg">
      <Description term="解密信息为">
        <div v-html="decodeContent"></div>
      </Description>
    </DescriptionList>
  </div>
</template>

<script>
//解密
import {encoder, decoder} from "@/api/encoder_decoder";
import Upload_item from "@/components/upload_item";
import {DescriptionList} from "view-ui-plus";

export default {
  name: "decrypt",
  components: {DescriptionList, Upload_item},
  data() {
    return {
      format1: ['jpg', 'jpeg', 'png'],
      isCollapsed: false,
      BASE_URL: "http://101.34.204.110:5000/static/",
      loadingStatus: false,
      encodedImg: null,
      decodeMsg: '',
      decodeLoadingStatus: false,
    };
  },
  computed: {
    decodeContent() {
      //this.commend.content是后端传回来的文本数据，就是要对这个数据进行处理
      let arr = this.decodeMsg.split("");
      return arr.map((item) => {
        return item === "\n" ? "<br>" : item
      }).join("")
    }
  },
  methods: {
    handleFormatError(file, desc) {
      this.$Notice.warning({
        title: '文件格式不正确',
        desc: 'File format of ' + file.name + ' is incorrect, please select ' + desc
      });
    },
    handleMaxSize(file, desc) {
      this.$Notice.warning({
        title: '文件大小超出范围',
        desc: 'File  ' + file.name + ' is too large, no more than ' + desc
      });
    },
    decodeUpload(file) {
      /**
       * 解码器上传
       */

      // 验证
      if (!/\.(jpg|jpeg|png)$/.test(file.name)) {
        this.handleFormatError(file, "jpg,png")
        return false;
      }
      if (file.size > 1024 * 200) {
        this.handleMaxSize(file, "200kb")
        return false;
      }
      this.encodedImg = file
      this.decodeLoadingStatus = true;
      this.$Spin.show();
      const that = this;
      decoder(this.encodedImg)
          .then((result) => {
            that.encodedImg = null;
            that.decodeMsg = result;
            that.$Spin.hide();
            that.decodeLoadingStatus = false;
          })
          .catch((error) => {
            that.$Spin.hide();
            that.decodeLoadingStatus = false;
            that.$Notice.error({
              title: "错误",
              desc: error,
            });
          });
      return false;
    },
  }
}
</script>

<style scoped>

</style>